<template>
	<button  
		v-if="!to" 
		:class="[
			`${prefixCls}-btn`,
			{
				[`${prefixCls}-btn-${type}`]: type,
				[`${prefixCls}-btn-loading`]: loading,
				[`${prefixCls}-is-disabled`]: disabled
			}
		]"
		:type="nativeType"
		:disabled="disabled"
		@click="onClick"
	>
		<i :class="'icon icon-' + icon" v-if="icon"></i>
		<i v-if="loading" :class="['loading',[prefixCls+'-load-loop']]"></i>
		<span v-if="$slots.default">
			<slot></slot>
		</span>
	</button>

	<a 
		v-else 
		:class="[
			`${prefixCls}-btn`,
			{
				[`${prefixCls}-btn-${type}`]: type,
				[`${prefixCls}-btn-loading`]: loading,
			}
		]" 
		@click="onClick" 
		:href="to" 
		:target="target" 
		@keyup.prevent 
		@keydown.enter.prevent>
		<i :class="'icon icon-'+icon" v-if="icon"></i>
		<i v-if="loading" :class="['loading',[prefixCls+'-load-loop']]"></i>
		<span v-if="$slots.default">
			<slot></slot>
		</span>
	</a>
</template>

<script>
import { prefixCls } from '../prefix'
import './button.css'

export default {
	name: `${prefixCls}Button`,
	props: {
		icon:{
			type: String
		},
		loading:{
			type: Boolean,
			default: false
		},
		to:{
			type: String
		},
		target:{
			type: String,
			default: '_self'
		},
		type:{
			type: String
		},
		nativeType: {
			type: String,
			default: 'button'
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
    data() {
        return {
        	prefixCls: prefixCls,
        }
    },
	methods:{
		onClick:function(){
			this.$emit('click')
		}
	},
}
</script>
